import React from 'react';
import { connect } from 'dva';
import { Form, Modal, Input, Radio } from 'antd';

const { TextArea } = Input;
const FormItem = Form.Item;
@Form.create()
@connect(({ abtest, loading }) => ({
  abtest,
  loading: loading.models.abtest,
}))
class TestOptForm extends React.Component {
  static defaultProps = {
    values: {},
    isEdit: false,
    handleAdd: () => {},
    handleUpdate: () => {},
    handleModalVisible: () => {},
  };

  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  okHandle = () => {
    const { values, isEdit = false, form, handleAdd, handleUpdate } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      if (isEdit) {
        handleUpdate({
          id: values.id,
          ...fieldsValue,
        });
      } else {
        handleAdd({
          ...fieldsValue,
        });
      }
    });
  };

  render() {
    const { isEdit, modalVisible, handleModalVisible, values, form } = this.props;
    return (
      <Modal
        destroyOnClose
        maskClosable={false}
        width={640}
        style={{ top: 20 }}
        bodyStyle={{ padding: '10px 40px' }}
        title={isEdit ? '修改子模块' : '新增子模块'}
        visible={modalVisible}
        onCancel={() => handleModalVisible(false, false, values)}
        onOk={this.okHandle}
      >
        <FormItem key="name" {...this.formLayout} label="子模块名称">
          {form.getFieldDecorator('name', {
            rules: [
              { required: true, message: '请输入子模块名称！' },
              { message: '子模块名称长度不能超过20个字', min: 1, max: 20 },
            ],
            initialValue: values.name,
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem key="code" {...this.formLayout} label="子模块编码">
          {form.getFieldDecorator('code', {
            rules: [
              { required: true, message: '请输入子模块编码！' },
              { message: '子模块编码长度不能超过20个字', min: 1, max: 20 },
            ],
            initialValue: values.code,
          })(<Input placeholder="请输入" disabled={isEdit} />)}
        </FormItem>
        <FormItem key="type" {...this.formLayout} label="类型">
          {form.getFieldDecorator('type', {
            rules: [{ required: true, message: '请选择类型' }],
            initialValue: values.type,
          })(
            <Radio.Group>
              <Radio value={0}>查询</Radio>
              <Radio value={1}>召回</Radio>
              <Radio value={2}>排序</Radio>
            </Radio.Group>
          )}
        </FormItem>
        <FormItem key="status" {...this.formLayout} label="状态">
          {form.getFieldDecorator('status', {
            rules: [{ required: true, message: '请选择状态' }],
            initialValue: values.status,
          })(
            <Radio.Group>
              <Radio value={1}>启用</Radio>
              <Radio value={2}>禁用</Radio>
            </Radio.Group>
          )}
        </FormItem>
        <FormItem key="remark" {...this.formLayout} label="备注">
          {form.getFieldDecorator('remark', {
            rules: [{ message: '备注不能超过200个字符', max: 200 }],
            initialValue: values.remark,
          })(<TextArea rows={3} />)}
        </FormItem>
      </Modal>
    );
  }
}

export default TestOptForm;
